<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
          
			@media screen and (max-width:2000px) {
				
			}
			@media screen and (max-width:1680px) {
					
			}
			@media screen and (max-width:1600px) {
			}
			@media screen and (max-width:1440px) {
				#main {
				   width:70vw;height:80vh;position: absolute;top:15vh;left:15vw
				}	
			}
			@media screen and (max-width:1400px) {
				#main {
				   width:85vw;height:90vh;position: absolute;top:9vh;left:12vw
				}		
			}
			@media screen and (max-width:1366px) {
				#main {
				   width:80vw;height:80vh;position: absolute;top:18vh;left:12vw
				}			
			}
			@media screen and (max-width:1360px) {
						
			}
			 #main {
			   width:100vw;height:90vh;position: absolute;top:15vh;left:-1vw
			 }
        </style>
	  <body>
        <div id='main'></div>
		<script src='lib/esl.js'></script>
		<script src='lib/config.js'></script>
<!-- 		<script src='lib/jquery.min.js'></script> -->
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
        <script>
            //返回随机颜色
		function getColor() {
			var colors = ['#fd6f1b','#fd6f1b','#fd6f1b','#fd6f1b'];
			var index = Math.floor((Math.random() * colors.length)); 
			return colors[index];
		}
        $.ajax({
			async : true, //同步执行
			url: "http://192.168.1.27:8080/MetisManage/dataAuth/findDeviceLonlat",
			success: function (res) {
				var rdata=res.records;
				// console.log(rdata)
				var data = new Array();
				for (var i = 0; i < rdata.length; i++) {
					var lonlat = rdata[i].lonlat;
					var lonlatArray = lonlat.split(",");
					var lon = lonlatArray[0];
					var lat = lonlatArray[1];
					var map = {
						'latitude':lat,
						'longitude':lon
					}
					data.push(map);
			    }
		require([
				'echarts'
			], function (echarts) {
				$.get('../map/json/world.json', function (worldJson) {
					echarts.registerMap('world', worldJson);
					var latlong = data;
					// console.log(typeof(latlong))
					var chart = echarts.init(document.getElementById('main'), null, {
					});
					var max = -Infinity;
					var min = Infinity;
					chart.setOption({
						title : {
							x:'center',
							y:'top'
						},
						tooltip : {		
							enterable:false,
							trigger: 'item',
							formatter : function (params) {
								var relVal = params.data.value
								return relVal;//鼠标滑过的时候显示的数据
							}
						},
						visualMap: {
							show: false,
							min: 0,
							max: max,
							inRange: {
								symbolSize: [4, 4]
							}
						},
						geo: {
							name: '',
							//类型
							type: 'map',
							//地图
							map: 'world',
							roam: true,
							z:1,
							//图形上的文本标签,这里不显示
							label: {
								emphasis: {
									  show: false//高亮时不显示地图的上的名字.
								}
							},
							//地图区域的多边形 图形样式
							itemStyle: {
							   //普通状态
								normal: {
									areaColor: '#04041c',//区域处的颜色
									borderColor: '#3488b7',//地图边的颜色
									borderWidth: 1.2//地图边框的颜色,
								},
								//高亮状态
								emphasis: {
									color: 'rgba(0,191,255, 0.2)'
								}
							}
						},
						series : [
							{
								type: 'effectScatter',
								coordinateSystem: 'geo',
								//可以容纳的动画数量
								animationThreshold:50000,
								//是否启用图例 hover 时的联动高亮。
								legendHoverLink:true,
								//特效类型，目前只支持涟漪特效'ripple'
								// effectType:'ripple',
								//配置何时显示特效，render表示渲染完就显示
								// showEffectOn:'render',
								//涟漪特效相关配置，period:动画的时间，scale：动画中波纹的最大缩放比例，brushType：波纹的绘制方式，可选 'stroke' 和 'fill'
								// rippleEffect:{'period':5, 'scale':3, 'brushType':'stroke'},
								symbolSize:[4,4],
								// symbolRotate :1,
								data: latlong.map(function (itemOpt) {
									return {
										value: [
											itemOpt.longitude,
											itemOpt.latitude
										],
										label: {
											emphasis: {
												show: false//鼠标滑过的时候显示的数字
											},
										},
										itemStyle: {
											normal: {
												//color: getColor(),
												// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
												color: {
													type: 'radial',
													x: 2,
													y: 2,
													r: 1,
													colorStops: [{
														offset: 0, color: getColor() // 0% 处的颜色
													}, {
														offset: 1, color: getColor() // 100% 处的颜色
													}],
													globalCoord: false // 缺省为 false
												}
											}
										},
									};
								})                          
							}
						]
					});
				});
			});
		    }
		});	
        </script>
    </body>
</html>